<template>
  <div class="home">
    <div class="home-header">
      <h1 class="home-header_title">
        <img alt="xrk logo" src="../assets/logo.png" />
        <span>xrk-ui-components</span>
      </h1>
      <h4 class="home-desc">基于vue2的ui组件库</h4>
    </div>
    <div class="home-main">
      <h4 class="main-title">组件列表</h4>
      <van-cell-group inset>
        <van-cell title="Dialog" is-link :to="{ name: 'Dialog' }" />
        <van-cell title="MessageBox" is-link :to="{ name: 'messageBox' }" />
        <van-cell title="Toast" is-link :to="{ name: 'toast' }" />
        <van-cell title="Loading" is-link :to="{ name: 'loading' }" />
        <van-cell title="AreaSelector" is-link :to="{ name: 'areaSelector' }" />
        <van-cell title="DatetimePicker" is-link :to="{ name: 'datetimePicker' }" />
        <van-cell title="Validatir" is-link :to="{ name: 'Validatir' }" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.home-header_title {
  display: flex;
  align-items: center;
  span {
    font-weight: 600;
    font-size: 26px;
  }
}
.home-desc {
  padding-bottom: 10px;
  font-size: 26px;
  color: rgba(69, 90, 100, 0.6);
}
.home-main {
  flex-grow: 1;
  background-color: #f7f8fa;
  .main-title {
    margin: 15px 0;
    color: rgba(69, 90, 100, 0.6);
  }
}
</style>
